<template>
  <div>
    <div class="leftBox">
      <div class="headNav">
        <!-- <div
          class="headNavText"
          :class="{ selectHeadNav: isSelect == '推荐' }"
          @click="selectHeadNav('推荐')"
        >推荐</div>-->
        <div
          class="headNavText"
          :class="{ selectHeadNav: isSelect == '热门' }"
          @click="selectHeadNav('热门')"
        >热门</div>
        <div
          class="headNavText"
          :class="{ selectHeadNav: isSelect == '最新' }"
          @click="selectHeadNav('最新')"
        >最新</div>
				<div>
					<el-button class="addbtnes" size="medium" @click="navigationSelect"
					  >写文章</el-button
					>
				</div>
      </div>
      <el-divider class="titleDivider"></el-divider>
      <noMore v-if="listData.length == 0"></noMore>
      <div class="invitationBox" v-for="(item, index) in listData" :key="index">
        <div class="flexBox">
          <div class="leftImg">
            <el-image style="width: 123px; height: 123px" :src="item.articleimg" fit="cover"></el-image>
          </div>
          <div>
            <div class="invitationBoxTitle" @click="toDetails(item)">{{ item.articlename }}</div>
            <div class="invitationBoxSubTitle">{{ item.textReplace }}</div>
            <div class="invitationBoxBottom">
              <div class="invitationBoxBottomItem">{{ item.reading }} 次阅读</div>
              <div class="invitationBoxBottomItem">{{ item.reply }} 回复</div>
              <div class="invitationBoxBottomItem">{{ item.praiseSize }} 赞</div>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="limitSize"
        layout="prev, pager, next, jumper"
        :total="articleSize"
        :current-page.sync="currentPage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { IMAGE_URL } from "../../../utils/global";
import { get_article } from "../../../api/article";
import noMore from "../../../components/noMore";

export default {
  components: {
    noMore
  },
  data() {
    return {
      IMAGE_URL,
      isSelect: "热门",
      listData: [],
      // currentPage: 1,
      skipSize: 0, //开始位置
      articleSize: 0, //总文章
      limitSize: 10,
      currentPage: 1,
      sortSelect: {
        sort: {
          reading: -1
        }
      } //排序
    };
  },
  watch: {
    async $route(newRouter) {
      //监听路由是否变化
      if (newRouter.path == "/proposal") {
        this.getArticle(this.sortSelect);
      }
    }
  },
  created() {
    this.getArticle(this.sortSelect);
  },
  methods: {
		navigationSelect() {
		  this.$router.push('/writeProposal');
		},
    selectHeadNav(nav) {
      if (this.isSelect == nav) return;
      this.isSelect = nav;
      this.skipSize = 0;
      this.currentPage = 1;
      if (this.isSelect == "热门") {
        this.sortSelect = {
          sort: {
            reading: -1
          }
        };
        this.getArticle(this.sortSelect);
      } else {
        this.sortSelect = {
          sort: {
            release_time: -1
          }
        };
        this.getArticle(this.sortSelect);
      }
    },
    async getArticle(query) {
      let Data = await get_article({
        query: {
          audit: true,
          aeticletype: "创新建议"
        },
        ...query,
        skip: this.skipSize,
        limit: this.limitSize,
        count: true
      });
      console.log("listData建议", Data);
      this.listData = Data.data;
      this.articleSize = Data.countnum;
    },
    toDetails(item) {
      this.$router.push({
        path: "/proposalDetails",
        query: {
          article_id: item._id
        }
      });
    },
    handleCurrentChange(val) {
      this.skipSize = (val - 1) * this.limitSize;
      console.log(`当前页: ${val}`);
      this.getArticle(this.sortSelect);
    }
  }
};
</script>

<style lang="scss" scoped>
.leftBox {
  min-height: 220px;
  background: #fff;
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
  .titleDivider {
    margin: 10px 0 24px 0 !important;
  }
  .headNav {
    display: flex;
    color: #6c6c6c;
		position: relative;
    .headNavText {
      font-size: 22px;
      font-weight: 600;
      margin-right: 25px;
      cursor: pointer;
      &:hover {
        color: #1d2f70;
        font-weight: 600;
      }
    }
		.addbtnes {
		  display: block;
		  color: #3257b5;
		  background-color: #eaeaea;
		  font-weight: 550;
		  font-size: 14px;
		  width: 100px;
		  letter-spacing: 2px;
		  position: absolute;
		  right: 0px;
			top: -5px;
		}
  }
  .invitationBox {
    .flexBox {
      display: flex;
      .leftImg {
        margin-right: 20px;
      }
      .invitationBoxTitle {
        font-size: 23px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        // width: 850px;
        overflow: hidden;
        text-overflow: ellipsis; //超出部分以省略号显示
        // white-space: nowrap;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
        cursor: pointer;
        &:hover {
          color: #1d2f70;
          text-decoration: underline;
        }
      }
      .invitationBoxSubTitle {
        min-height: 40px;
        color: #6c6c6c;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
      }
      .invitationBoxBottom {
        display: flex;
        margin-top: 14px;
        color: #b3b2b2;
        .invitationBoxBottomItem {
          margin-right: 18px;
          font-size: 14px;
        }
      }
    }
  }
}
//选中样式
.selectHeadNav {
  color: #1d2f70;
}
</style>
